<template>
  <div>
    <el-form label-width="80px" :inline="true">
      <el-form-item label="线下学校">
        <el-select
          v-model="search.school_id"
          filterable
          remote
          reserve-keyword
          placeholder="请选择线下学校"
          :remote-method="getOfflineSchool"
          :loading="schooLloading"
          clearable
          @change="handleSelect()"
        >
          <el-option
            v-for="item in offlineSchool"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年级">
        <nice-select
          v-model="search.grade"
          placeholder="请选择年级"
          clearable
          :options="gradeList"
        ></nice-select>
      </el-form-item>
      <el-form-item label="科目">
        <nice-select
          v-model="search.subject"
          placeholder="请选择科目"
          clearable
          :options="selectEnums.nice_course.subject"
        ></nice-select>
      </el-form-item>
      <el-form-item label="课程名称">
        <el-select
          v-model="search.name"
          filterable
          remote
          reserve-keyword
          placeholder="请输入课程名称"
          :remote-method="remoteMethod"
          :loading="loading"
          @change="handleChange"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="期次" v-if="search.name">
        <nice-select
          v-model="search.period"
          placeholder="请选择期次"
          clearable
          :options="periodOptions"
        ></nice-select>
      </el-form-item>
      <el-form-item label="学生">
        <el-input
          v-model="search.student"
          placeholder="请输入学生姓名"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="辅导老师">
        <el-input
          v-model="search.tutor"
          placeholder="请输入辅导老师"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="small"
          >搜索</el-button
        >
      </el-form-item>
      <div class="right">
        <el-form-item>
          <el-button type="primary" @click="batchAllocation()" size="small"
            >批量分配</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <nice-table
      :data="list"
      :showSelection="true"
      :columns="columns"
      :pagination="pagination"
      @handleSelectionChange="handleSelectionChange"
    >
      <el-table-column
        label="操作"
        align="center"
        width="100"
        slot="opreation"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="changeTeacher(scope.row)"
            >更换辅导老师</el-button
          >
        </template>
      </el-table-column>
    </nice-table>
    <!--分配辅导老师-->
    <allocation-teacher
      v-if="allocationTeacherVisible"
      ref="allocationTeacher"
      @refreshDataList="getDataList"
      :mode="mode"
      :multipleSelection="multipleSelection"
    ></allocation-teacher>
  </div>
</template>
<script>
// import base from '@/views/base.vue'
import viewOn from "@/assets/img/view_on.png";
import viewOff from "@/assets/img/view_off.png";
import AllocationTeacher from "./allocation-teacher";
// import {cascadeQuery} from '@/api/api.js'
import {
  getAllCourse,
  getPeriodByCouseId,
  getAssignsTutorQuery,
  queryPageList,
  getGrade
} from "@/api/user.js";
import { myEnumsMixins } from "@/utils/mixins";
export default {
  name: "allocation-guidance",
  // extends: base,
  components: {
    AllocationTeacher
  },
  mixins: [myEnumsMixins],
  data() {
    return {
      search: {
        school_id: "", // 学校
        grade: "", // 年级
        subject: "", // 科目
        name: "", // 课程名称
        period: "", // 期次
        student: "", // 学生
        tutor: "" // 辅导老师
      },
      schooLloading: false,
      periodOptions: [],
      coverGradeList: [],
      gradeList: [],
      offlineSchool: [],
      mode: "",
      options: [],
      pagination: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        handleCurrentChange: this.handleCurrentChange,
        handleSizeChange: this.handleSizeChange
      },
      list: [],
      viewOn,
      viewOff,
      loading: false,
      allocationTeacherVisible: false,
      columns: [
        {
          label: "学生姓名",
          prop: "name"
        },
        {
          label: "联系方式",
          prop: "phone",
          width: 150,
          extends: [
            {
              clickFunction: val => {
                this.viewPhone(val);
              },
              isView: true
            }
          ]
        },
        {
          label: "性别",
          prop: "sex",
          extends: [
            {
              filterFunction: val => {
                return this.$filterSex(val);
              }
            }
          ]
        },
        {
          label: "课程名称/期次",
          prop: "course_name_period",
          isArray: true,
          width: "500"
        },
        {
          label: "来源渠道",
          prop: "source",
          width: "100",
          extends: [
            {
              filterFunction: val => {
                return this.$filterEnums(
                  val,
                  this.selectEnums.nice_student.source
                );
              }
            }
          ]
        },
        {
          label: "分配状态",
          width: "100",
          prop: "status"
        },
        {
          label: "辅导老师",
          prop: "tutor_name",
          width: "100"
        }
      ],
      multipleSelection: []
    };
  },
  activated() {
    this.getDataList();
  },
  methods: {
    async getDataList() {
      this.search.period = this.search.name ? this.search.period : "";
      let res = await getAssignsTutorQuery({
        subject: this.search.subject, // 学科
        school_id: this.search.school_id, // 学校
        grade: this.search.grade, // 年级
        name: this.search.student, // 学生姓名
        tutorName: this.search.tutor, // 辅导老师
        courseName: "", // 课程名称
        courseId: this.search.name, // 课程id
        periodId: this.search.period, // 课程期次
        currPage: this.pagination.pageNum,
        pageSize: this.pagination.pageSize
      });
      if (res[0]) {
        return;
      }
      let data = res[1];
      if (data && data.code === 0) {
        this.pagination.total = data.data.totalSize;
        this.list = data.data.list;
        if (this.list && this.list.length) {
          this.list.forEach(ele => {
            ele.isView = false;
            ele.course_name_period =
              ele.course_name_period &&
              ele.course_name_period.split("|").map(ele => {
                let arr = ele.replace(/(^\s*)|(\s*$)/g, "").split(":");
                return arr[1] + "  " + arr[0] + "期";
              });
            ele.status = ele.tutor_id ? "已分配" : "未分配";
          });
        }
      }
    },
    async getOfflineSchool(query) {
      console.log("query", query);
      if (query !== "") {
        this.schooLloading = true;
        let form = {
          table_name: "nice_school",
          "nice_school.school_name": query
        };
        let res = await queryPageList(form);
        if (res[0]) {
          return;
        }
        let data = res[1];
        this.schooLloading = false;
        if (data && data.code === 0) {
          if (data.data.pageList.list && data.data.pageList.list.length) {
            this.offlineSchool = data.data.pageList.list.map(item => {
              return {
                label: item.school_name,
                value: item.id,
                nursery_grade: item.nursery_grade,
                junior_grade: item.junior_grade,
                middle_grade: item.middle_grade,
                high_grade: item.high_grade
              };
            });
          } else {
            this.offlineSchool = [];
          }
        }
      }
    },
    handleSelect(val) {
      this.gradeList = [];
      let coveragegrade =
        this.offlineSchool &&
        this.offlineSchool.filter(ele => {
          return ele.value === this.search.school_id;
        })[0];
      this.coverGradeList = [];
      this.selectEnums.nice_school.coverage_grade.forEach(ele => {
        coveragegrade.nursery_grade &&
          ele.label === "幼儿园" &&
          this.coverGradeList.push(ele.value);
        coveragegrade.junior_grade &&
          ele.label === "小学" &&
          this.coverGradeList.push(ele.value);
        coveragegrade.middle_grade &&
          ele.label === "初中" &&
          this.coverGradeList.push(ele.value);
        coveragegrade.high_grade &&
          ele.label === "高中" &&
          this.coverGradeList.push(ele.value);
      });
      this.getGrade();
    },
    async getGrade() {
      this.gradeList = [];
      let res = await getGrade({ grade: this.coverGradeList });
      if (res[0]) {
        return;
      }
      if (res[1] && res[1].code === 0) {
        res[1].data.forEach(ele => {
          this.gradeList.push({
            label: ele.display_value,
            value: ele.t_id
          });
        });
      }
    },
    onSubmit() {
      this.pagination.pageNum = 1;
      this.getDataList();
    },
    handleChange() {
      if (this.search.name) {
        this.getPeriodByCouseId();
      }
    },
    async getPeriodByCouseId() {
      let res = await getPeriodByCouseId({
        "nice_course_period.course_id": this.search.name
      });
      if (res[0]) {
      }
      let data = res[1];
      if (data && data.code === 0) {
        this.periodOptions =
          data.data.list &&
          data.data.list.length &&
          data.data.list.map(ele => {
            return {
              label: "第" + this.$convertNum(ele.sort) + "期",
              value: ele.id
            };
          });
      } else {
        this.$message.error(data.msg);
      }
    },
    async remoteMethod(query) {
      if (query !== "") {
        this.loading = true;
        let res = await getAllCourse({ "nice_course.name": query });
        if (res[0]) {
          return;
        }
        let data = res[1];
        this.loading = false;
        if (data && data.code === 0) {
          if (data.data.pageList.list && data.data.pageList.list.length) {
            this.options = data.data.pageList.list.map(item => {
              return {
                label: item.name,
                value: item.id
              };
            });
          } else {
            this.options = [];
          }
        }
      }
    },
    batchAllocation() {
      if (!this.multipleSelection.length) {
        this.$alert("请选择需要分配的学生", "提示", {
          confirmButtonText: "关闭",
          callback: action => {}
        });
      } else {
        this.mode = "batch";
        this.allocationTeacherVisible = true;
        this.$nextTick(() => {
          this.$refs.allocationTeacher.init();
        });
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val;
      this.getDataList();
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getDataList();
    },
    changeTeacher(row) {
      this.allocationTeacherVisible = true;
      this.mode = "single";
      this.$nextTick(() => {
        this.$refs.allocationTeacher.init(row);
      });
    },
    viewPhone(row) {
      this.list.forEach(ele => {
        if (ele.id !== row.id) {
          ele.isView = false;
        }
      });
      row.isView = !row.isView;
      this.list = [...this.list];
    }
  }
};
</script>
<style lang="scss" scoped></style>
